{% extends "base.html" %}

{% block content %}
<br>

<div class="bs-docs-section">
    <div class="page-header">
        <div class="row">
            <div class="col-lg-12">
                <h1 id="buttons">自动补全</h1>
            </div>
        </div>
    </div>

    <br>

    <div class="row">
        <div class="bs-component col-12">
            <h3>借助于flask_wtf构建一个form</h3>
            <!-- 这个form的oninput过程中，执行自动补全 -->
            <form action="{{ url_for('autocomplete') }}" method="post" class="form-inline">
            {{ form.hidden_tag() }} <!-- hidden_tag()则是这个form的csrf加密 -->
                <div class="col-12 row form-group">
                    <div class="col-3">
                        {{ form.message.label }} <!-- message这个输入框，在初始化的时候制定了一个label “anything you want” -->
                    </div>
                    <div class="col-8">
                        {{ form.message(class="form-control is-valid", placeholder="dnd试试", id="message", oninput="complete()" ) }} <!-- 可以再后续的括号中改变这个输入框的各种参数，以达到与模板同意风格目的 -->
                    </div>
                </div>
            </form>
        </div>
    </div>

    <hr>
    <div class="row">
        <div class="bs-component col-12">
            <h3>实现方法</h3>
            <a href="{{ url_for('markdown', filename='自动补全.html') }}">Markdown</a>
        </div>
    </div>

</div>
{% endblock %}


{% block script %}

<script type="text/javascript">
function complete( ) {
    $( "#message" ).autoComplete(
        {
            source:function(term, response) {
                $.getJSON(
                    "{{ url_for('api.autocomplete') }}", 
                    { q: term,}, 
                    function (data) {response(data.matching_results);}
                );
            },
            matching_results: 2,
            select: function (event, ui) {
                console.log(ui.item.value);
            }
        }
    );
}
</script>

{% endblock %}